<!--
 * @Author: lsy
 * @Date: 2023-02-12 16:21:09
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-20 13:06:07
 * @Description: basicFormItem
-->
<template>
  <div class="basicForm-item">
	<slot v-if="column.slot" :name="column.slot"  :model="model" :prop="prop"></slot>
	<template v-else-if="column.component === 'remote-select'">
    <scRemoteSelect
      :remote-method="column.remoteMethod"
      v-model="model[prop]"
      v-model:modelLabel="model[column.labelKey]"
      v-bind="column.props"
    />
  </template>
	<component
		v-else
		:is="column.component || 'el-input'"
		style="width: 100%;"
		v-bind="itemProps"
		v-model="model[prop]"
		v-on="column.on || {}"
		value-format="YYYY-MM-DD hh:mm:ss"
	>
		<template v-if="column.component === 'el-select'">
			<el-option
				v-for="i in column.options"
				:key="i.value"
				:label="i.label"
				:value="i.value"
			>
			</el-option>
		</template>
	</component>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
const props = defineProps({
    column: {
        type: Object,
        default: () => ({})
    },
    prop: {
        type: String,
        default: ''
    },
    model: {
        type: Object,
        default: () => ({})
    }
})
const itemProps = computed(() => {
	const itemProps = props.column;
	if (!itemProps.placeholder) {
		const isSelect = ['el-select'].includes(itemProps.component);
		itemProps.placeholder = isSelect ? `请选择${itemProps.label}` : `请输入${itemProps.label}`
	}
	Object.keys(itemProps).forEach(key => {
		if (typeof itemProps[key] === 'function') {
			itemProps[key] = itemProps[key](props.model, key)
		}
	})
	return itemProps;
})

</script>

<style lang='scss' scoped>
</style>
